<template>
  <div class="banli">
    <Breadcrumb :breadStr="breadStr"></Breadcrumb>
    <el-card
      shadow="hover"
      :body-style="{ padding: '20px' }"
    >
      <p
        class="sync-state"
        v-if="syncbtnVisible"
      >
        <el-button
          type="success"
          size="mini"
          @click="syncState()"
        >同步状态</el-button>
        <span class="sync-state-text">同步状态说明，直接从导入需求管理后，办理页的数据是不会自动获取的</span>
      </p>
      <el-collapse
        v-model="activeNames"
        @change="handleChange"
      >
        <el-collapse-item
          title="已启动 (正在招聘)"
          name="1"
        >
          <BanliTable :tableList="startList"></BanliTable>
        </el-collapse-item>
        <el-collapse-item
          title="已完成 (招聘结束)"
          name="2"
        >
          <BanliTable :tableList="finishList"></BanliTable>
        </el-collapse-item>
        <el-collapse-item
          title="已撤销 (取消招聘)"
          name="3"
        >
          <BanliTable :tableList="undoList"></BanliTable>
        </el-collapse-item>
      </el-collapse>
    </el-card>
    <ZhaopinDetail></ZhaopinDetail>
  </div>
</template>

<script>
import BanliTable from '../common/BanliTable'
import Breadcrumb from '../common/Breadcrumb'
import ZhaopinDetail from '../common/ZhaopinDetail'
import { homeMixin } from '../../utils/mixin'
export default {
  mixins: [homeMixin],
  components: {
    Breadcrumb, BanliTable, ZhaopinDetail
  },
  data () {
    return {
      startList: [],
      finishList: [],
      undoList: [],
      test: [],
      // 折叠面板，默认打开选项
      activeNames: ['1'],
      // TODO，以后可以加条件判断他是否显示,招聘需求列表有值，办理列表值为空
      syncbtnVisible: false
    }
  },
  methods: {
    // 改变展开项目，val是展开项 的数组
    handleChange (val) {
      console.log(val)
      // if (val.indexOf('0') !== -1) {
      //   this.getList(0)
      // }
      // if (val.indexOf('1') !== -1) {
      //   this.getList(1)
      // }
      // if (val.indexOf('2') !== -1) {
      //   this.getList(2)
      // }
    },
    // 获取已启动的数据,传入招聘状态值0,1,2(已启动，已完成，已撤销)
    async getList (state) {
      state = state - 0
      const { data } = await this.$http.get('zpstate/querybystate', {
        params: {
          state
        }
      })
      if (data.error_code !== 0) {
        console.log(data.msg)
        return
      }
      data.data = this.dealTime(JSON.stringify(data.data), 'data')
      if (state === 0) {
        this.startList = data.data
      }
      if (state === 1) {
        this.finishList = data.data
      }
      if (state === 2) {
        this.undoList = data.data
      }
    },
    // 同步招聘状态，当招聘需求是从数据库直接导入的时候，招聘状态不会自动创建。
    // 需要此方法，同步一下，特定状态下(招聘需求有数据，招聘状态无数据)，同步状态才会显示
    async syncState () {
      // 获取所有招聘信息
      const { data } = await this.$http.get('/zp/getList', {
        params: {
          pagenum: 1, pagesize: 100, query: ''
        }
      })
      // 所有招聘id的数组
      const zplist = []
      if (data.error_code === 0 && data.count > 0) {
        data.data.map(item => {
          zplist.push(item.id)
        })
        zplist.map(async item => {
          await this.$http.post('/zpstate/add', {
            zpid: item
          })
        })
      }
    }
  },
  created () {
    this.getBread()
    this.getList(0)
    this.getList(1)
    this.getList(2)
  }
}
</script>

<style lang="scss" scoped>
.banli {
  .sync-state {
    .sync-state-text {
      margin-left: 10px;
    }
  }
}
</style>
